<template>
  <div class="bulletinBoardBox">
    <div class="topBox">
      <div class="titleBox">
        <span class="title-r">任务看板</span>
        <div class="textNew">New</div>
      </div>
      <div class="screenBox">
        <div style="width: 300px; height: 32px">
          <el-input placeholder="请输入任务名称查询" v-model="form1.renewtaskname">
            <i
              @click="getScreenList()"
              slot="suffix"
              class="el-input__icon el-icon-search"
            ></i>
          </el-input>
        </div>

        <div @click="searchDialogRight" class="screenXuanze">
          <i class="el-icon-coordinatee"></i>
          <span>{{length}}个筛选条件</span>
          <i class="el-icon-refresh-right"></i>
        </div>
        <el-button
          type="primary"
          @click="handleIsShow"
          style="margin-right: 15px"
          >新增场景</el-button
        >
        <el-button type="primary">批量导入</el-button>
      </div>
      <div v-if="isShow" class="addTaskBox">
        <div class="addTask">
          <div class="addTaskTitle">
            <i class="el-icon-tickets"></i>
            <span>新建「新单回访」任务</span>
          </div>
          <div class="addTasktext">对预承保、已承保的新单进行回访服务</div>
        </div>
        <div class="addTask">
          <div class="addTaskTitle">
            <i class="el-icon-tickets"></i>
            <span>新建「应交期续收」任务</span>
          </div>
          <div class="addTasktext">对进入应交期阶段的保单进行续期服务</div>
        </div>
        <div class="addTask" @click="dialogRight1 = true;">
          <div class="addTaskTitle">
            <i class="el-icon-tickets"></i>
            <span>新建「前瞻续收」任务</span>
          </div>
          <div class="addTasktext">对期交保单提前进行续期预热服务</div>
        </div>
        <div class="addTask">
          <div class="addTaskTitle">
            <i class="el-icon-tickets"></i>
            <span>新建「新人首单面谈」任务</span>
          </div>
          <div class="addTasktext">对首次出单的新人代理人进行面谈服务</div>
        </div>
      </div>
    </div>

    <div class="contentBox">
      <div class="contentScreenBox">
        <div>
          为您找到以下 <span style="color: #3d7cff;margin:0 5px"> {{total}} </span> 条结果
        </div>

         <!-- | 筛选条件：
        <div class="searchTag">
          生成日期 7 月 1 日～7 月 30 日 <i class="el-icon-error"></i>
        </div> -->
      </div>
      <div class="listsBox">
        <div class="listBox" v-for="item in dataList" :key="item.sid">
          <div class="listTop">
            <div class="listTitle">{{item.renewTaskName||'新人单面谈'}}</div>
            <div>
              <el-switch
                v-model="item.taskState"
                class="tablescopeswitch"
                active-value="01"
                inactive-value="02"
                active-text="已开启"
                inactive-text="已禁用"
              >
              </el-switch>
            </div>
          </div>
          <div class="listContent">
            <div class="unmberBox">
              <div class="unmberContent">
                <div class="unmberText">
                  <div>任务总数</div>
                  <div class="num">{{item.taskDetailNum&&item.taskDetailNum.taskTotal||20}}</div>
                </div>
                <div class="unmberText">
                  <div>已执行</div>
                  <div class="num">{{item.taskDetailNum&&item.taskDetailNum.doning||20}}</div>
                </div>
                <div class="unmberText">
                  <div>已完成</div>
                  <div class="num">{{item.taskDetailNum&&item.taskDetailNum.done||20}}</div>
                </div>
              </div>
              <div class="unmberContent">
                <div class="unmberText">
                  <div>短信已发送</div>
                  <div class="num">{{item.taskDetailNum&&item.taskDetailNum.smsNum||20}}</div>
                </div>
                <div class="unmberText">
                  <div>智能外呼中</div>
                  <div class="num">{{item.taskDetailNum&&item.taskDetailNum.callNum||20}}</div>
                </div>
                <div class="unmberText">
                  <div>人工服务中</div>
                  <div class="num">{{item.taskDetailNum&&item.taskDetailNum.peopleNum||20}}</div>
                </div>
              </div>
            </div>
            <div class="progressBox">
              <div style="display: flex;">
                <div class="progress-h"></div>
                <div class="progress-r">进行中</div>
              </div>

              <div style="padding: 0 9px">
                <div class="progress-text">执行进度：{{item.taskRate||75}}%</div>
                <el-progress :percentage="item.taskRate||75" :format="format"></el-progress>
              </div>
            </div>
            <div class="tagBox">
              <div style="margin-bottom: 8px">
                <span class="tag" style="color: #f99171; background: #fff6f1"
                  ><i class="el-icon-wallet"></i>大额单≥{{item.bigContNum||20}} 个</span
                >
                <span class="tag" style="color: #3d7cff; background: #ecf3ff"
                  ><i class="el-icon-time"></i> 计划偏差率超过 {{item.planBaisRate}}%</span
                >
              </div>

              <span class="tag" style="color: #37cc8a; background: #dcf2e8"
                ><i class="el-icon-place"></i>投诉客户≥{{item.complaintNum||20}} 个</span
              >
            </div>
            <div class="bottomBox">
              <div><i class="el-icon-edit"></i>编辑任务</div>
              <div><i class="el-icon-pie-chart"></i>数据分析</div>
              <div><i class="el-icon-copy-document"></i>复制创建</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 搜索条件抽屉 -->
    <!-- 筛选侧边栏 -->
    <el-drawer
      title="筛选数据项"
      :visible.sync="dialogRight"
      direction="rtl"
      custom-class="demo-drawer"
      size="786px"
    >
      <screenList
        ref="screenList"
        @sendScreenMessage="getScreenList"
        @closeDialogRight="closeDialogRight"
      ></screenList>
    </el-drawer>
    <!-- 配置侧边栏 -->
    <el-drawer
      title="场景配置流程-前瞻续收"
      :visible.sync="dialogRight1"
      direction="rtl"
      custom-class="demo-drawer"
      size="786px"
    >
      <configuration
        ref="configuration"
        :percenNum="18"
        @sendScreenMessage1="getScreenList1"
        @closeDialogRight1="closeDialogRight1"
      >
      </configuration>
    </el-drawer>
  </div>
</template>

<script>
import screenList from "./components/screenList.vue";
import configuration from "./components/configuration.vue";
import Cookies from "js-cookie";
import {task1list,task1Add} from '@/api/system/dataNew'
export default {
  name: "BulletinBoard",
  components: {
    screenList,
    configuration,
  },
  data() {
    return {
      length:0,
      isShow: false,
      dialogRight: false,
      dialogRight1: false,
      switchisShow: false,
      form1:{},
      total:"",
      dataList:[]
    };
  },
  mounted() {
    this.getScreenList()
  },
  methods: {
    format(percentage) {
      return "";
    },

    handleIsShow() {
      this.isShow = !this.isShow;
    },
    handlestatuschange() {

    },
    //  ............................筛选侧边栏
    searchDialogRight() {
      this.dialogRight = true;
    },
    closeDialogRight() {
      this.dialogRight = false;
    },
    // 接收侧边筛选
    getScreenList(value) {
      this.length=value&& Object.keys(value).length||0
      console.log(value,)
      const obj={
      ...value
      }
      task1list(this.form1.renewtaskname?this.form1:obj).then(res => {
        if(res.code==200){
          this.dataList=res.rows
          this.total=res.total
          this.closeDialogRight();
        }
      })
    },

    
    // ...............................配置
    closeDialogRight1() {
      this.dialogRight1 = false;
    },
    getScreenList1(value) {
     const obj={
      contConditionDTO:{
        renewtasktype: "new",
        ...value.contConditionDTO,
        managecom:value.managecom,
        renewtaskname:value.renewtaskname,
        salchnel:value.salchnel,
      },
      serviceStrategyDTO:{
        strategyDTOList:value.strategyDTOList
      }
     }
     task1Add(obj).then(res => {
        console.log('res::::', res)
      })
    //  this.closeDialogRight1()
    },
  },
};
</script>

<style lang="scss" scoped>
.bulletinBoardBox {
  // padding: 14px;
  .topBox {
    background: linear-gradient(166deg, #eaf0fc 0%, #ffffff 100%);
    padding-bottom: 15px;
    .titleBox {
      display: flex;
      padding: 4px 14px 24px 14px;

      .title-r {
        font-weight: 500;
        font-size: 16px;
        color: #3d7cff;
        position: relative;

        &::before {
          position: absolute;
          top: 50%;
          left: -12px;
          transform: translateY(-50%);
          content: "";
          width: 5px;
          height: 15px;
          background-color: #3d7cff;
        }
      }

      .textNew {
        font-weight: normal;
        font-size: 12px;
        color: #f9725c;
        line-height: 22px;
        text-align: left;
        background-color: #fff;
        margin-left: 8px;
      }
    }

    .screenBox {
      display: flex;
      height: 32px;
      padding-left: 20px;

      .screenXuanze {
        width: 155px;
        height: 32px;
        background: #ffffff;
        border-radius: 2px;
        border: 1px solid #3d7cff;
        font-weight: 400;
        font-size: 14px;
        color: #3d7cff;
        display: flex;
        align-items: center;
        justify-content: space-around;
        padding: 0 3px;
        margin: 0 15px;
      }
    }
  }

  .addTaskBox {
    display: flex;
    width: 100%;
    overflow: hidden;
    margin-top: 10px;
    // padding-left: 20px;

    .addTask {
      padding: 8px 20px 11px 9px;
      width: 300px;
      // height: 69px;
      background: #ffffff;
      border-radius: 2px;
      border: 1px solid #eeeeee;
      margin-left: 20px;

      .addTaskTitle {
        span {
          margin-left: 5px;
          font-weight: 600;
          font-size: 16px;
          color: #4f566a;
        }
      }

      .addTasktext {
        font-weight: 400;
        font-size: 14px;
        color: #a1a2a6;
        margin-left: 18px;
        margin-top: 8px;
      }
    }
  }

  .contentBox {
    background: #f0f2f5;
    padding: 0 6px;
    padding-left: 20px;

    .contentScreenBox {
      margin-bottom: 10px;
      display: flex;
      font-weight: 400;
      font-size: 14px;
      color: #6e6e6e;

      .searchTag {
        padding: 1px 5px;
        background: #e1e4eb;
        border-radius: 1px;
        font-size: 12px;
        color: #86888f;
      }
    }

    .listsBox {
      display: flex;
      flex-wrap: wrap;
      .listBox {
        width: 351px;
        margin: 0 16px 15px 0;
        background: linear-gradient(133deg, #ddecff 0%, #ffffff 100%);
        border-radius: 4px;
        border: 1px solid #d4e4ff;

        .listTop {
          display: flex;
          justify-content: space-between;
          padding: 10px 12px 10px 24px;

          .listTitle {
            font-weight: 600;
            font-size: 16px;
            color: #4f566a;
          }
        }

        .listContent {
          padding: 10px;
          background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
          border-radius: 8px 0px 4px 4px;

          .unmberBox {
            .unmberContent {
              display: flex;
              font-weight: 500;
              font-size: 12px;
              color: #c8cacb;
              margin-bottom: 13px;

              .unmberText {
                width: 33.3%;

                .num {
                  font-weight: normal;
                  font-size: 12px;
                  color: #444447;
                }
              }
            }
          }

          .progressBox {
            background: #ecf2ff;
            margin: 0 0 12px 0;
            border-radius: 2px;
            padding: 11px 9px 12px 0;
            .progress-h{
              width: 3px;
                height: 14px;
                background: #3d7cff;
                border-radius: 0px 3px 3px 0px;
            }
            .progress-r {
              width: 47px;
              background: #ffffff;
              border-radius: 1px;
              border: 0px solid #3d7cff;
              font-weight: 400;
              font-size: 12px;
              color: #3d7cff;
              padding: 0px 5px;
              margin-bottom: 7px;
              margin-left: 10px;
            }

            .progress-text {
              font-weight: 400;
              font-size: 11px;
              color: #4f566a;
              margin-left: 10px;
            }
          }

          .tagBox {
            font-weight: 500;
            font-size: 14px;
            margin-bottom: 15px;

            .tag {
              width: 128px;
              padding: 2px 15px 2px 5px;
              margin-right: 11px;
              border-radius: 2px;

              i {
                margin-right: 8px;
              }
            }
          }

          .bottomBox {
            display: flex;
            justify-content: space-between;
            font-weight: 500;
            font-size: 14px;
            color: #a1a2a6;

            i {
              margin-right: 8px;
            }
          }
        }
      }
    }
  }
}

::v-deep .el-progress {
  .el-progress-bar {
    padding-right: 0;
    .el-progress-bar__inner {
      background: linear-gradient(270deg, #70b3ff 0%, #3d7cff 100%);
    }
  }
}

::v-deep {
  .el-drawer__header {
    font-size: 16px;
    color: rgba(16, 16, 16, 1);
  }


  .el-checkbox__label {
    width: 100%;
  }
}

// ::v-deep .tablescopeswitch .el-switch__label {
//   position: absolute;
//   display: none;
//   color: #fff;
// }

// ::v-deep .tablescopeswitch .el-switch__label--right {
//   z-index: 1;
//   right: 6px;
// }

// ::v-deep .tablescopeswitch .el-switch__label--left {
//   z-index: 1;
//   left: 6px;
// }

// ::v-deep .tablescopeswitch .el-switch label.is-active {
//   display: block;
// }

// .tablescopeswitch.el-switch .el-switch_core,
// .el-switch .el-switch label {
//   width: 75px !important;
// }
</style>
